import React, { Component } from 'react';
import axios from 'axios';
import './mingju.scss';
import { Pagination } from 'antd';
import BaseHeader from '@/components/base/baseHeader';
import GlobalBottom from '@/components/base/GlobalBottom';

class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        list:[],
        sid:''
      }
    }
    componentDidMount () {
      console.log(this.props);
      axios.get('http://poem.daxunxun.com:8000/api/juzi',{dataType:'json'})
          .then((res) => {
            // console.log(res.data)
            this.setState({
              list:res.data,
            })
          })
    }
    goDetail (sid) {
      console.log(this.props);
      this.props.history.push('/mingjudetail/' + sid)
    }
    onChange (page) {
      console.log(page);
    }
    render () {
      const list = this.state.list;
      let arr = [];
      let typelist =[];
      for (var i in list) {
        let typeArr = [];
        let types = list[i].type;
        for(var j in types) {
          typeArr.push(types[j])
        }
        arr.push(
          typeArr
        )
      }
      var arr2 = [].concat.apply([], arr);
      var set = new Set(arr2);
      var arr3 = [...set];
      for(var k=0;k<arr3.length;k++){
        typelist.push(<span key={k}>{arr3[k]}</span>)
      }
      return (
        <div className = "container">
          <BaseHeader />
          <div className="containersWrap">
            <div className = "containers">
              <div className="shiwen_left">
                <div className="mingjutitletype" style={{background:'#F0EFE2', width:'668px',
    height:'95px',border:'1px solid #C8C7BC'}}>
                  <div className="mingjuson1">
                      <h1>不限<span>1 / 1000+页</span></h1>
                  </div>
                  <div className="mingjuson2">
                    <div className="tleft">
                      <span className="zhuti">主题：</span>
                    </div>
                    <div className="tmiddle">
                      <span>不限</span>
                      <span>抒情</span>
                      <span>山水</span>
                      <span>天气</span>
                    </div>
                    <div className="tright">
                      
                    </div>
                  </div>
                </div>
                <div className="mingjucontent">
                  <ul className="mingjucont">
                    {
                      this.state.list.map((item, index) => {
                        return (
                          <li key={index}>
                            <span className="mingju" style={{color:'#19537D'}}>{item.mingju}</span>
                            <span className="mingjuline">-----</span>&nbsp;&nbsp;
                            <span className="mingjudynasty" style={{color:'#19537D'}}>{item.dynasty}</span>
                            <span className="mingjutitle" ref={item.sid} style={{color:'#19537D'}} onClick={ this.goDetail.bind(this, item.sid)}>《{item.title}》</span>
                          </li>
                        )
                      })
                    } 
                  </ul>
                  <div className="shiwenpage" style={{width:'400px',height:'60px',lineHeight:'60px',margin:'0 auto'}}>
                    <Pagination simple defaultCurrent={1} total={50} onChange={this.onChange.bind(this)}/>
                </div>
                </div>
              </div>
              <div className="shiwen_right">
                <div className="globalType">
                  <div className="type_title">
                    <div className="line"></div>
                    <b>类型</b>
                  </div>
                  <div className="type_cont">
                    {
                      typelist
                    }
                  </div>
                </div>
              </div>
            </div>
            <GlobalBottom />
          </div>
        </div>
      )
    }
  }
  
  export default Com;